<template>
  <a-config-provider :locale="locale">
    <a-layout class="basic-layout">
      <!-- 顶部导航栏 -->
      <a-layout-header class="header">
        <GlobalHeader />
      </a-layout-header>

      <!-- 内容区域 -->
      <a-layout-content class="content">
        <div class="content-wrapper">
          <router-view />
        </div>
      </a-layout-content>

      <!-- 底部版权信息 -->
<!--      <a-layout-footer class="footer">
        <GlobalFooter />
      </a-layout-footer>-->
    </a-layout>
  </a-config-provider>
</template>

<script setup lang="ts">
import { Layout, ConfigProvider } from 'ant-design-vue'
import GlobalHeader from '@/components/GlobalHeader.vue'
import GlobalFooter from '@/components/GlobalFooter.vue'
import zhCN from 'ant-design-vue/es/locale/zh_CN'

const { Header: ALayoutHeader, Content: ALayoutContent, Footer: ALayoutFooter } = Layout

// 设置中文语言包
const locale = zhCN
</script>

<style scoped>
.basic-layout {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.header {
  padding: 0;
  background: transparent;
  box-shadow: none;
  position: relative;
  height: 64px;
}

.content {
  flex: 1;
  padding: 0;
  background: 
    linear-gradient(180deg, rgba(240, 242, 245, 0.6) 0%, rgba(240, 242, 245, 0.9) 50%, #f0f2f5 100%),
    radial-gradient(circle at 20% 20%, rgba(24, 144, 255, 0.03) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(64, 169, 255, 0.03) 0%, transparent 50%);
  position: relative;
}

.content-wrapper {
  width: 100%;
  background: 
    linear-gradient(145deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.8) 100%);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  padding: 24px;
  min-height: calc(100vh - 64px);
  position: relative;
  box-sizing: border-box;
  border-radius: 16px 16px 0 0;
  box-shadow: 
    0 -8px 32px rgba(0, 0, 0, 0.08),
    0 -2px 16px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    inset 1px 0 0 rgba(255, 255, 255, 0.3),
    inset -1px 0 0 rgba(255, 255, 255, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-bottom: none;
}

.footer {
  background: #fff;
  border-top: 1px solid #e8e8e8;
  padding: 1px 0;
  text-align: center;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .content-wrapper {
    padding: 20px;
  }
}

@media (max-width: 768px) {
  .content {
    padding: 0;
  }

  .content-wrapper {
    padding: 16px;
  }
}

@media (max-width: 480px) {
  .content-wrapper {
    padding: 12px;
  }
}
</style>
